<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>效果展示</title>
    <style>
        body>div{
            width: 200px;
            height: 700px;
            border: 1px solid darkcyan;
        }
        body>div>header{
            text-align: center;
            font-weight: bolder;
            font-size: 20px;
            line-height: 60px;
        }
        body>div>div{
            border: 1px solid dodgerblue;
            line-height: 40px;
            font-weight: bold;
            text-align: center;
            color: #41aef2;
            background-color: #D2D2D2;
        }
        body>div>article>section{
            text-indent: 2em;
            font-size: 15px;
            line-height: 30px;
            margin: 10px 0;

        }
        body>div>article>section:hover{
            background-color: #d6d6d6;
        }
        body>div>article{
            position: relative;
            display: none;
        }
        body>div>article>table{
            border: 1px solid black;
            position: absolute;
            left: 200px ;
            top: -10px;
            width: 200px;
            display: none;
        }
        tr{
            background-color: #4dc827;
        }
    </style>
    <script>
        var closeObj;
        var closeStaff;
        let closeShow;
        window.onload=function (people){
            closeObj=document.getElementById("market");
            closeStaff=document.getElementById('business');
            closeShow=people;
        }
        function department(showID){
            closeObj.style.display='none';
            var showObj=document.getElementById(showID);
            showObj.style.display='block';
            closeObj=showObj;
        }
        function showStaff(table){
            closeStaff.style.display='none';
            var tableObj=document.getElementById(table);
            tableObj.style.display='block';
            closeStaff=tableObj;
        }
        function singleTable(tableID){
            var tableObj=document.getElementById(tableID);
            tableObj.style.display='none';
        }
        function showInfo(show){
            var array = document.getElementsByTagName("tr");
            for (var i=0;i<array.length;i++){
                array[i].style.backgroundColor="#4dc827";
            }
            show.style.backgroundColor='red';

        }
    </script>
</head>
<body>
    <div>
        <header>阿里巴巴管理系统</header>
        <div onclick="department('market')">市场部</div>

        <article  id="market">
        <section>市场一部</section>
        <section>市场二部</section>
        </article>

        <div onclick="department('marketing')">营销部</div>
        <article id="marketing">
            <section onclick="showStaff('live')">直播部门</section>
            <table id="live">
                <thead><tr><th>姓名</th><th>职位</th><th onclick="singleTable('live')">年龄</th></tr></thead>
                <tbody><tr  onclick="showInfo(this)"><td>李杨杨</td><td>总经理</td><td>22</td></tr>
                <tr  onclick="showInfo(this)"><td>小琴</td><td>主播</td><td>21</td></tr>
                <tr  onclick="showInfo(this)"><td>李天真</td><td>助理</td><td>26</td></tr></tbody>
            </table>
            <section onclick="showStaff('business')">电商部门</section>
            <table id="business">
                <thead><tr><th>姓名</th><th>职位</th><th onclick="singleTable('business')">年龄</th></tr></thead>
                <tbody><tr  onclick="showInfo(this)"><td>文林挥</td><td>总经理</td><td>22</td></tr>
                <tr  onclick="showInfo(this)"><td>李梅</td><td>助理</td><td>26</td></tr></tbody>
            </table>
        </article>

        <div onclick="department('planning')">企划部</div>
        <article id="planning">
        <section>企划部长</section>
        <section>企划专员</section>
        <section>文案专员</section>
        <section>新媒体专员</section></article>

    </div>
</body>
</html>